<template>
	<top-bar></top-bar>
	<tool-bar-status :viewCount="viewCount"></tool-bar-status>
	<game-box-status :gameBoxes="gameBoxes" :gameStatus="gameStatus" :boxAmount="boxAmount" :gameBoxActiveIndex="gameBoxActiveIndex"></game-box-status>
	<account-container :accounts="gameAccounts" :gameStatus="gameStatus" :gameRoundStatus="gameRoundStatus" :gameResult="gameResult"></account-container>
	<weapon-container :accounts="gameAccounts"></weapon-container>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';

import TopBar from '@/components/top-bar/Index.vue';
import ToolBarStatus from './components/CreateBattle/ToolBarStatus.vue';
import GameBoxStatus from './components/CreateBattle/GameBoxStatus.vue';
import AccountContainer from './components/CreateBattle/AccountContainer.vue';
import WeaponContainer from './components/CreateBattle/WeaponContainer.vue';

export default defineComponent({
	setup() {
		// 创建一个响应式状态对象
		const state = reactive({
			viewCount: 4,
			gameRound: 0,
			gameBoxes: [
				{ id: 1, img: '' },
				{ id: 2, img: '' },
				{ id: 3, img: '' },
				{ id: 4, img: '' }
			],
			gameBoxActiveIndex: 0,
			// 1:进行中,2:已结束
			gameStatus: 1,
			// gameStatus = 1 时起作用(1:游戏中,2:本轮已结束)
			gameRoundStatus: 1,
			boxAmount: 0,

			gameResult: {
				winner: {
					name: '张三',
					avatar: '',
					amount: '300.00'
				}
			},
			gameAccounts: [
				{
					name: '张三',
					avatar: 'https://img.js.design/assets/img/6853f957321303f8e3b7005d.png',
					balance: '300.00',
					race: '25.00%',
					weaponsImage: 'https://img.js.design/assets/img/6851447e1c07b75ddb2534a3.png',
					weapons: [
						{
							id: 1,
							name: 'M14A-消音型',
							img: '',
							tag: '女火神之炽焰',
							color: 'rgba(109, 206, 255, 1)',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 2,
							name: 'Tec-9',
							img: '',
							tag: '地下水',
							color: 'rgba(163, 121, 255, 1)',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 3,
							name: 'Tec-9',
							img: '',
							tag: '地下水',
							color: 'rgba(240, 93, 93, 1);',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 4,
							name: 'M14A-消音型',
							img: '',
							tag: '女火神之炽焰',
							color: 'rgba(109, 206, 255, 1)',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 5,
							name: 'Tec-9',
							img: '',
							tag: '地下水',
							color: 'rgba(163, 121, 255, 1)',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 6,
							name: 'Tec-9',
							img: '',
							tag: '地下水',
							color: 'rgba(240, 93, 93, 1);',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 7,
							name: 'M14A-消音型',
							img: '',
							tag: '女火神之炽焰',
							color: 'rgba(109, 206, 255, 1)',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 8,
							name: 'Tec-9',
							img: '',
							tag: '地下水',
							color: 'rgba(163, 121, 255, 1)',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 9,
							name: 'Tec-9',
							img: '',
							tag: '地下水',
							color: 'rgba(240, 93, 93, 1);',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						}
					]
				},
				{
					name: '李四',
					avatar: '',
					balance: '250.00',
					race: '25.00%',
					weaponsImage: 'https://img.js.design/assets/img/6851447e1c07b75ddb2534a3.png',
					weapons: [
						{
							id: 1,
							name: 'M14A-消音型',
							img: '',
							tag: '女火神之炽焰',
							color: 'rgba(109, 206, 255, 1)',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 2,
							name: 'Tec-9',
							img: '',
							tag: '地下水',
							color: 'rgba(163, 121, 255, 1)',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 5,
							name: 'Tec-9',
							img: '',
							tag: '地下水',
							color: 'rgba(163, 121, 255, 1)',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 6,
							name: 'Tec-9',
							img: '',
							tag: '地下水',
							color: 'rgba(240, 93, 93, 1);',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 7,
							name: 'M14A-消音型',
							img: '',
							tag: '女火神之炽焰',
							color: 'rgba(109, 206, 255, 1)',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 8,
							name: 'Tec-9',
							img: '',
							tag: '地下水',
							color: 'rgba(163, 121, 255, 1)',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 9,
							name: 'Tec-9',
							img: '',
							tag: '地下水',
							color: 'rgba(240, 93, 93, 1);',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						}
					]
				},
				{
					name: '王五',
					avatar: '',
					balance: '480.00',
					race: '25.00%',
					weaponsImage: 'https://img.js.design/assets/img/6851447e1c07b75ddb2534a3.png',
					weapons: [
						{
							id: 1,
							name: 'M14A-消音型',
							img: '',
							tag: '女火神之炽焰',
							color: 'rgba(109, 206, 255, 1)',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 2,
							name: 'Tec-9',
							img: '',
							tag: '地下水',
							color: 'rgba(163, 121, 255, 1)',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 5,
							name: 'Tec-9',
							img: '',
							tag: '地下水',
							color: 'rgba(163, 121, 255, 1)',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 6,
							name: 'Tec-9',
							img: '',
							tag: '地下水',
							color: 'rgba(240, 93, 93, 1);',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 7,
							name: 'M14A-消音型',
							img: '',
							tag: '女火神之炽焰',
							color: 'rgba(109, 206, 255, 1)',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 8,
							name: 'Tec-9',
							img: '',
							tag: '地下水',
							color: 'rgba(163, 121, 255, 1)',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						},
						{
							id: 9,
							name: 'Tec-9',
							img: '',
							tag: '地下水',
							color: 'rgba(240, 93, 93, 1);',
							desc: '略有磨损',
							price: 59.45,
							race: '25.00%'
						}
					]
				}
			]
		});

		return {
			...toRefs(state)
		};
	},
	components: { TopBar, ToolBarStatus, GameBoxStatus, AccountContainer, WeaponContainer }
});
</script>

<style scope lang="scss"></style>
